<template>
  <div>
    <header class="header">
      <div class="logo">
        <img src="@/assets/icon/Logo.png" alt="Logo" class="icon" />
        <span class="site-name">红星党建</span>
      </div>

      <el-menu
        :default-active="activeRoute"
        @select="handleSelect"
        class="custom-menu" 
        mode="horizontal"
      >
        <el-menu-item index="/user/home"><router-link to="/user/home">首页</router-link></el-menu-item>
        <el-menu-item index="/user/location"><router-link to="/user/location">党建地点</router-link></el-menu-item>
        <el-menu-item index="/user/forum"><router-link to="/user/forum">论坛</router-link></el-menu-item>
        <el-menu-item index="/user/news"><router-link to="/user/news">公告资讯</router-link></el-menu-item>
        <el-menu-item index="/user/store"><router-link to="/user/store">商城</router-link></el-menu-item>
        <el-menu-item index="/user/profile"><router-link to="/user/profile">个人中心</router-link></el-menu-item>
      </el-menu>

      <div class="avatar" @click="toggleDropdown">
        <img src="@/assets/icon/Logo.png" alt="头像" class="avatar-icon" />
        <div v-if="isDropdownVisible" class="dropdown">
          <router-link to="/personal-center">个人中心</router-link>
          <a @click.prevent="logout">退出登录</a>
        </div>
      </div>
    </header>

    <main>
      <router-view />
    </main>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: "Layout",
  setup() {
    const isDropdownVisible = ref(false);
    const activeRoute = ref(window.location.pathname);

    const toggleDropdown = () => {
      isDropdownVisible.value = !isDropdownVisible.value;
    };

    const logout = () => {
      alert("退出登录");
      // 实际的退出逻辑，例如清除 token
    };

    const handleSelect = (index) => {
      activeRoute.value = index;
    };

    return {
      isDropdownVisible,
      toggleDropdown,
      logout,
      handleSelect,
      activeRoute,
    };
  },
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  background-color: #D32F2F; /* 确定的背景色 */
  padding: 10px 20px;
  color: white;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: auto;
}

.icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.site-name {
  font-size: 24px;
  font-weight: bold;
}

.custom-menu {
  flex: none; /* 避免菜单占满整行 */
  margin: 0 auto; /* 居中对齐 */
}

.custom-menu .el-menu-item {
  font-size: 20px; /* 扩大字体 */
  font-family: 'Arial', sans-serif; /* 使用艺术字体 */
}

.custom-menu .el-menu-item a {
  text-decoration: none; /* 无下划线 */
  color: white; /* 字体颜色 */
}

.custom-menu .el-menu-item:hover {
  color: yellow; /* 悬停颜色 */
}

.custom-menu .is-active {
  background-color: rgba(255, 255, 255, 0.2); /* 激活时背景 */
  color: yellow; /* 激活时字体颜色 */
}

.avatar {
  position: relative;
  cursor: pointer;
}

.avatar-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.dropdown {
  position: absolute;
  right: 0;
  background-color: white;
  color: black;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.dropdown a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
}

.dropdown a:hover {
  background-color: #f0f0f0;
}
</style>
